<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
  <!--.svg-container {-->
    <!--padding: 6px 5px 6px 15px;-->
    <!--color: $dark_gray;-->
    <!--vertical-align: middle;-->
    <!--width: 30px;-->
    <!--display: inline-block;-->
    <!--&_login {-->
     <!--font-size: 20px;-->
   <!--}-->
  <!--}-->
  <!--.show-pwd {-->
    <!--position: absolute;-->
    <!--right: 10px;-->
    <!--top: 7px;-->
    <!--font-size: 16px;-->
    <!--color: $dark_gray;-->
    <!--cursor: pointer;-->
    <!--user-select: none;-->
  <!--}-->
<!--</style>-->
<template>
  <div>
    <el-button type="primary" @click="dialogTableVisible = true">添加</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="添加" width="970px">
      <el-form ref="row_data" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="用户手机" prop="phone">
          <el-input v-model="row_data.phone" placeholder="用户手机" style="width: 200px"/>
        </el-form-item>
        <!--<el-form-item label="用户密码" prop="password">-->
        <!--<el-input v-model="row_data.password" placeholder="用户密码" style="width: 200px"/>-->
        <!--</el-form-item>-->
        <el-form-item label="用户密码" prop="password" >
          <el-input
            :type="passwordType"
            v-model="row_data.password"
            :placeholder="$t('login.password')"
            name="password"
            auto-complete="on"
            @keyup.enter.native="handleLogin">
            <span slot="prefix" class="svg-container">
              <svg-icon icon-class="password"/>
            </span>
            <span slot="suffix" class="show-pwd" @click="showPwd">
              <svg-icon icon-class="eye"/>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item :label="'账号状态'" prop="status">
          <el-select
            v-model="row_data.status"
            class="filter-item"
            placeholder="请选择状态"
            clearable
            @keyup.enter.native="handleFilter">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="'管理员权限'" prop="shop_id">
          <el-select
            v-model="row_data.shop_id"
            class="filter-item"
            placeholder="请选择"
            clearable>
            <el-option
              v-for="item in shop_role"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即创建</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { add } from '@/api/user/admin_user'
// import { getUserInfoList } from '@/api/user/user'
import { getShopRoleList } from '@/api/shop_admin_auth/shopRole'
import store from '@/store'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  data() {
    const validateUsername = (rule, value, callback) => {
      callback()
    }
    const validatePassword = (rule, value, callback) => {
      if (!value || value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      status: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      dialogTableVisible: false,
      shop_id: null,
      list: [],
      shop_role: [],
      row_data: {
      },
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      passwordType: 'password',
      loading: false,
      showDialog: false
    }
  },
  created() {
    // this.getUserInfo()
    this.get_shop_role_list()
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    valueItem(index) {
      for (let i = 0; i < this.list.length; i += 1) {
        if (this.list[i].id === index) {
          this.row_data.phone = this.list[i].phone
        }
      }
    },
    // getUserInfo() {
    //   getUserInfoList(store.getters.token).then(response => {
    //     this.list = response.data.list.data
    //   })
    // },
    get_shop_role_list() {
      getShopRoleList(store.getters.token).then(res => {
        this.shop_role = res.data.list.data
      })
    },
    submitForm() {
      add(store.getters.token, this.row_data).then(res => {
        if (res.data.status === true) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message.error(res.data.msg)
        }
        this.$emit('getLists')
        this.close()
      })
    },
    close() {
      this.dialogTableVisible = false
    }
  }
}
</script>
